import { animationDom } from "./load.js"
import { TranslMove } from "./translMove.js"
export function request({//请求方法
    url,
    method = 'GET',
    data = null,
    headers = {},
    isFile = false
}) {
    return new Promise((reslove, reject) => {
        fetch(url, {
            method,
            headers: {
                ...headers
            },
            body: isFile === false ? data ? JSON.stringify(data) : null : data
        }).then(res => {
            res.json().then(res => {
                reslove(res)
            }).catch(err => {
                reject({
                    code: "0",
                    message: "服务异常"
                })
            })

        }).catch(err => {
            reject({
                code: "0",
                message: "服务异常"
            })
        })
    })
}
export function jsonParams(json, slice = '&') {//对象转params
    return Object.keys(json)
        .reduce((acc, item) => {
            return String(acc) + item + '=' + json[item] + slice;
        }, '')
        .slice(0, -1);
}

export function loadingRef(val = false, fn1 = () => { }, fn2 = () => { }) {//loading拦截器
    const data = { value: val }
    const handler = {
        set(target, property, value) {
            if (value === true && value != target[property]) {
                fn1()
            } else if (value === false && value != target[property]) {
                fn2()
            }
            target[property] = value;
            return true;
        }
    }
    return new Proxy(data, handler);
}

function imgHoverChange({
    target, defUrl, activeUrl
}) {//图片hover更换
    target.addEventListener("mouseenter", () => {
        target.setAttribute("src", activeUrl)
    })
    target.addEventListener("mouseleave", () => {
        target.setAttribute("src", defUrl)
    })
}

function imgHoverColorChange({
    target, activeColor
}) {//图片hover颜色更换
    target.addEventListener("mouseenter", () => {
        target.style.filter = activeColor
    })
    target.addEventListener("mouseleave", () => {
        target.style.filter = 'unset'
    })
}

export function previewImg(url) {//预览图片
    const preview = document.createElement('section')
    preview.setAttribute('class', 'img-preview-container')
    const previewImg = document.createElement('img')
    previewImg.setAttribute('class', 'img-preview-container-img')
    previewImg.setAttribute('src', url)
    const move = new TranslMove(previewImg, preview)
    move.zoomEvent()
    move.dragEvent()
    const close = document.createElement('img')
    close.setAttribute('class', 'img-preview-container-close')
    close.setAttribute('src', '../static/images/close.png')
    close.onclick = closePreviewImg
    preview.appendChild(previewImg)
    preview.appendChild(close)
    document.body.appendChild(preview)
    document.body.style.overflow = 'hidden'
}
function closePreviewImg() {//关闭预览
    document.body.style.overflow = 'auto'
    document.getElementsByClassName('img-preview-container')[0].remove();
}
export function createEmpty() {//创建empty
    const empty = document.getElementsByClassName('web-empty-mask')[0]
    const emptyImg = '<img src="../static/images/empty.png" />'
    if (empty.innerHTML === "") {
        empty.innerHTML = emptyImg
    }
    if (empty) {
        empty.style.display = 'flex'
    }
}
export function hideEmpty() {//隐藏empty
    const empty = document.getElementsByClassName('web-empty-mask')[0]
    if (empty) {
        empty.style.display = 'none'
    }
}
export function createLoad() {//创建动画
    const load = document.getElementsByClassName('web-loading-mask')[0]
    if (load.innerHTML === "") {
        load.innerHTML = animationDom
    }
    if (load) {
        document.body.scrollTo({ top: 0 })
        document.body.style.overflow = 'hidden'
        load.style.display = 'flex'
    }
}
export function hideLoad() {//隐藏动画
    const load = document.getElementsByClassName('web-loading-mask')[0]
    if (load) {
        document.body.style.overflow = 'auto'
        load.style.display = 'none'
    }
}

//list:[{label,value}],类名，默认选中value,customDom-自定义列表内容,customLabel-自定义label内容,flyoutClass-弹框类名
export function createSelectBox({ flyoutClass=undefined,customLabel=undefined,list=[], className, defValue = null, customDom=undefined }) {//创建下拉选择盒子
    const box = document.createElement('div')
    box.setAttribute('class', `select-box ${className}`)
    const span = document.createElement('span')
    span.setAttribute('class', 'select-box-text')
    //下拉框
    const select = document.createElement("div");
    select.setAttribute("class", `select-flyout ${flyoutClass}`);
    if(customLabel){
        span.appendChild(customLabel)
    }
    if (list.length > 0) {
        list.forEach(item => {
            const ite = document.createElement("span")
            ite.setAttribute("data-value", item.value)
            ite.setAttribute("data-label", item.label)
            if (item.value === defValue) {
                ite.setAttribute("class", "select-flyout-item select-flyout-item-active")
            } else {
                ite.setAttribute("class", "select-flyout-item")
            }
            ite.innerText = item.label
            select.appendChild(ite)
        })
        if (defValue === null) {
            span.innerText = list[0].label
        } else {
            span.innerText = list.find(item => item.value === defValue).label
        }
    } else if(customDom){
        select.appendChild(customDom)
    }

    const svg = `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg>`
    box.appendChild(span)
    box.insertAdjacentHTML("beforeend", svg);
    box.appendChild(select);
    return box
}
